<template>
  <div>
    <van-nav-bar>
      <template #right>
        <img src="../../public/logo.png" alt="面经" width="60px" />
      </template>
    </van-nav-bar>
    <van-list
      v-model="loading"
      :finished="finished"
       finished-text="没有更多了"
      @load="onLoad"
    >
      <ArticleItem v-for="item in list" :key="item.id" :item="item"></ArticleItem>
    </van-list>
  </div>
</template>

<script>
// 首页请求渲染
// 2. 看接口文档，确认请求方式，请求地址，请求参数
//    请求地址: https://mock.boxuegu.com/mock/3083/articles
//    请求方式: get
// import axios from "axios";
import { getArticles } from '../api/article'
export default {
  name: 'ArticlePage',
  data () {
    return {
      current: 1,
      sorter: 'weight_desc',
      list: [], // 文章列表
      loading: false, // 是否加载中
      finished: false // 是否加载了全部的数据
    }
  },
  async created () {

  },
  methods: {
    async onLoad () {
      const res = await getArticles({
        current: this.current,
        sorter: this.sorter
      })
      console.log(res)
      this.list.push(...res.data.data.rows)
      this.loading = false
      this.current++
      if (this.created > res.data.data.total) {
        this.finished = true
      }
    }

  }
}
</script>

<style lang="less" scoped>
</style>
